<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="welcome-card">
          <div class="welcome-content">
            <h1>欢迎使用外卖管理系统</h1>
            <p>一站式外卖管理解决方案，提升您的业务效率</p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt-4">
      <el-col :span="6">
        <el-card class="statistic-card">
          <div class="statistic-item">
            <div class="statistic-icon bg-primary">
              <i class="el-icon-user"></i>
            </div>
            <div class="statistic-info">
              <div class="statistic-value">128</div>
              <div class="statistic-label">今日订单</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="statistic-card">
          <div class="statistic-item">
            <div class="statistic-icon bg-success">
              <i class="el-icon-tickets"></i>
            </div>
            <div class="statistic-info">
              <div class="statistic-value">¥25,648</div>
              <div class="statistic-label">今日收入</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="statistic-card">
          <div class="statistic-item">
            <div class="statistic-icon bg-info">
              <i class="el-icon-shopping-cart-2"></i>
            </div>
            <div class="statistic-info">
              <div class="statistic-value">56</div>
              <div class="statistic-label">待处理订单</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="statistic-card">
          <div class="statistic-item">
            <div class="statistic-icon bg-warning">
              <i class="el-icon-star-off"></i>
            </div>
            <div class="statistic-info">
              <div class="statistic-value">4.8</div>
              <div class="statistic-label">平均评分</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt-4">
      <el-col :span="16">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>近期订单趋势</span>
            </div>
          </template>
          <div class="chart-container">
            <div ref="chartRef" style="height: 300px;"></div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>热门商品排行</span>
            </div>
          </template>
          <div class="rank-list">
            <div class="rank-item" v-for="i in 5" :key="i">
              <div class="rank-number" :class="i <= 3 ? 'top-three' : ''">{{ i }}</div>
              <div class="rank-info">
                <div class="rank-title">商品名称 {{ i }}</div>
                <div class="rank-value">{{ 100 - i * 10 }} 单</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt-4">
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>快捷操作</span>
            </div>
          </template>
          <div class="quick-actions">
            <el-row :gutter="20">
              <el-col :span="8" class="action-item">
                <el-button type="primary" plain class="action-button">
                  <i class="el-icon-plus"></i>
                  <div class="action-text">新增订单</div>
                </el-button>
              </el-col>
              <el-col :span="8" class="action-item">
                <el-button type="success" plain class="action-button">
                  <i class="el-icon-dish"></i>
                  <div class="action-text">菜品管理</div>
                </el-button>
              </el-col>
              <el-col :span="8" class="action-item">
                <el-button type="info" plain class="action-button">
                  <i class="el-icon-user"></i>
                  <div class="action-text">用户管理</div>
                </el-button>
              </el-col>
            </el-row>
            <el-row :gutter="20" class="mt-4">
              <el-col :span="8" class="action-item">
                <el-button type="warning" plain class="action-button">
                  <i class="el-icon-data-line"></i>
                  <div class="action-text">数据统计</div>
                </el-button>
              </el-col>
              <el-col :span="8" class="action-item">
                <el-button type="danger" plain class="action-button">
                  <i class="el-icon-setting"></i>
                  <div class="action-text">系统设置</div>
                </el-button>
              </el-col>
              <el-col :span="8" class="action-item">
                <el-button type="primary" plain class="action-button">
                  <i class="el-icon-document"></i>
                  <div class="action-text">报表导出</div>
                </el-button>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>系统公告</span>
            </div>
          </template>
          <div class="notice-list">
            <div class="notice-item">
              <div class="notice-title">系统维护通知</div>
              <div class="notice-time">2023-10-15</div>
            </div>
            <div class="notice-item">
              <div class="notice-title">新功能上线：智能调度系统</div>
              <div class="notice-time">2023-10-10</div>
            </div>
            <div class="notice-item">
              <div class="notice-title">优惠活动：满减活动设置</div>
              <div class="notice-time">2023-10-08</div>
            </div>
            <div class="notice-item">
              <div class="notice-title">配送范围调整公告</div>
              <div class="notice-time">2023-10-01</div>
            </div>
            <div class="notice-item">
              <div class="notice-title">商家入驻优惠政策</div>
              <div class="notice-time">2023-09-25</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index">
import { ref, onMounted } from 'vue'
// import * as echarts from 'echarts'

const version = ref('3.9.0')

// const chartRef = ref(null)
// let chart = null

function goTarget(url) {
  window.open(url, '__blank')
}

// 初始化图表
// function initChart() {
//   chart = echarts.init(chartRef.value)
//   const option = {
//     tooltip: {
//       trigger: 'axis'
//     },
//     xAxis: {
//       type: 'category',
//       data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
//     },
//     yAxis: {
//       type: 'value'
//     },
//     series: [{
//       data: [120, 200, 150, 80, 70, 110, 130],
//       type: 'line',
//       smooth: true
//     }]
//   }
//   chart.setOption(option)
// }

onMounted(() => {
  // 初始化图表
  // initChart()
  
  // 监听窗口大小变化
  // window.addEventListener('resize', () => {
  //   if (chart) {
  //     chart.resize()
  //   }
  // })
})
</script>

<style scoped lang="scss">
.home {
  .welcome-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    
    .welcome-content {
      text-align: center;
      padding: 30px 0;
      
      h1 {
        font-size: 28px;
        margin-bottom: 10px;
      }
      
      p {
        font-size: 16px;
        opacity: 0.9;
      }
    }
  }
  
  .mt-4 {
    margin-top: 20px;
  }
  
  .statistic-card {
    border: none;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    
    .statistic-item {
      display: flex;
      align-items: center;
      
      .statistic-icon {
        width: 60px;
        height: 60px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20px;
        color: white;
        font-size: 24px;
        
        &.bg-primary {
          background: #409eff;
        }
        
        &.bg-success {
          background: #67c23a;
        }
        
        &.bg-info {
          background: #909399;
        }
        
        &.bg-warning {
          background: #e6a23c;
        }
      }
      
      .statistic-info {
        .statistic-value {
          font-size: 24px;
          font-weight: bold;
          margin-bottom: 5px;
        }
        
        .statistic-label {
          font-size: 14px;
          color: #999;
        }
      }
    }
  }
  
  .card-header {
    font-weight: bold;
    font-size: 16px;
  }
  
  .rank-list {
    .rank-item {
      display: flex;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid #eee;
      
      &:last-child {
        border-bottom: none;
      }
      
      .rank-number {
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        border-radius: 50%;
        background: #f5f5f5;
        font-size: 12px;
        margin-right: 15px;
        
        &.top-three {
          background: #409eff;
          color: white;
        }
      }
      
      .rank-info {
        flex: 1;
        display: flex;
        justify-content: space-between;
        
        .rank-title {
          font-size: 14px;
        }
        
        .rank-value {
          color: #999;
          font-size: 13px;
        }
      }
    }
  }
  
  .quick-actions {
    .action-item {
      margin-bottom: 20px;
      
      .action-button {
        width: 100%;
        height: 80px;
        flex-direction: column;
        display: flex;
        align-items: center;
        justify-content: center;
        
        .el-icon-plus,
        .el-icon-dish,
        .el-icon-user,
        .el-icon-data-line,
        .el-icon-setting,
        .el-icon-document {
          font-size: 24px;
          margin-bottom: 8px;
        }
        
        .action-text {
          font-size: 14px;
        }
      }
    }
  }
  
  .notice-list {
    .notice-item {
      padding: 12px 0;
      border-bottom: 1px solid #eee;
      
      &:last-child {
        border-bottom: none;
      }
      
      .notice-title {
        font-size: 14px;
        margin-bottom: 5px;
        cursor: pointer;
        
        &:hover {
          color: #409eff;
        }
      }
      
      .notice-time {
        font-size: 12px;
        color: #999;
      }
    }
  }
}
</style>